<template>
<!--    <component-page-tree :operate="treeOperate" @change="treeChangeNode">-->
<!--        <template v-slot:header-main>-->
<!--            <div class="option"></div>-->
<!--            <div class="title">{{ $t('platform.doc.title.header-main') }}</div>-->
<!--            <div class="option justify-start">-->
<!--                <el-button size="mini" :disabled="!editorChanged" @click="onSubmit">{{ $t('action.save') }}</el-button>-->
<!--            </div>-->
<!--        </template>-->
<!--        <template v-slot:default>-->
<!--            <div class="flex-center p-2" v-show="tree.id && dataStatus != 'dle'">-->
<!--                <component-page-loading v-if="['loading', 'error', 'nodata'].indexOf(dataStatus) >= 0"-->
<!--                                        :status="dataStatus" @reload="getData">-->
<!--                </component-page-loading>-->
<!--            </div>-->
<!--            <div id="editor" class="editor" v-show="tree.id && dataStatus == 'dle'"></div>-->
<!--        </template>-->
<!--    </component-page-tree>-->
    <iframe :src="`https://agency.slo666.com/download/${$t('menu.platform.doc_name')}.pdf?t=${mathNumber}`" width="100%" height="100%" style="border: none;"></iframe>
<!--    <iframe src="https://agency.slo666.com/download/接口文档.pdf" width="100%" height="100%" style="border: none;"></iframe>-->
</template>

<script>
// editor
import '@toast-ui/editor/dist/toastui-editor.css';
import Editor from '@toast-ui/editor';
// editor 代码高亮
import 'prismjs/themes/prism.css';
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js';
// editor 字体颜色
import 'tui-color-picker/dist/tui-color-picker.css';
import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';
import colorSyntax from '@toast-ui/editor-plugin-color-syntax';
// editor 表格合并
import '@toast-ui/editor-plugin-table-merged-cell/dist/toastui-editor-plugin-table-merged-cell.css';
import tableMergedCell from '@toast-ui/editor-plugin-table-merged-cell';
// editor UML
import uml from '@toast-ui/editor-plugin-uml';
// editor i18n
import '@toast-ui/editor/dist/i18n/zh-cn';

export default {
    data() {
        return {
            tree: {},
            treeOperate: {
                action: {
                    getTreeList: '/platform/doc/tree/getList',
                    treeNodeCreate: '/platform/doc/tree/store',
                    treeNodeUpdate: '/platform/doc/tree/update',
                    treeNodeDestroy: '/platform/doc/tree/destroy',
                },
                tree: {
                    viewer: false,
                    defaultExpandFirstLevel: true,
                },
            },
            dataStatus: 'dle',
            editor: {},
            editorChanged: false,
            mathNumber:Math.floor(Math.random() * 1000000),
        }
    },
    mounted() {
        // editor i18n
        let languages = {
            'en': 'en-US',
            'zh-CN': 'zh-CN',
        };
        // editor 初始化
        this.editor = new Editor({
            el: document.querySelector('#editor'),
            plugins: [colorSyntax, codeSyntaxHighlight, tableMergedCell, uml],
            language: languages[this.$i18n.locale],
            previewStyle: 'vertical',
            usageStatistics: false,
        });
        // editor change event
        this.editor.on('change', (e) => {
            this.editorChanged = true;
        });
    },
    methods: {
        // 节点改变
        treeChangeNode(data) {
            // 缓存数据
            this.tree = data;
            // 获取数据
            this.getData();
        },
        // 获取数据
        getData() {
            // 清空 editor
            this.editor.setMarkdown('');
            // 初始化标记
            this.editorChanged = false;
            // 状态加载中
            this.dataStatus = 'loading';
            // 获取数据
            axios.get('/platform/doc/doc/getData', {
                params: {
                    tree_id: this.tree.id
                }
            }).then((response) => {
                if (_.includes([200, 44100], response.data.resp_msg.code)) {
                    this.dataStatus = 'dle';
                    if (response.data.resp_data != null) {
                        this.$nextTick(() => {
                            this.editor.setMarkdown(response.data.resp_data.md)
                            this.editor.moveCursorToStart(true)
                        })
                    }
                } else {
                    this.dataStatus = 'error';
                }
            })
        },
        onSubmit() {
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/platform/doc/doc/updateOrCreate', {
                tree_id: this.tree.id,
                md: this.editor.getMarkdown(),
            }).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.save')}),
                        showClose: true
                    });
                    // 标记已保存
                    this.editorChanged = false;
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.save')})
                            + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
::v-deep .editor {
    width: 100%;
    height: calc(100vh - #{$layout-header-height} - #{$page-container-padding} * 2 - #{$page-layout-header-height} - 1px) !important;
}

::v-deep .editor .toastui-editor-defaultUI {
    border: 0 none !important;
}

::v-deep .editor .toastui-editor-defaultUI,
::v-deep .editor .toastui-editor-contents,
::v-deep .editor .toastui-editor-defaultUI .ProseMirror {
    font-family: $font-family !important;
    color: $font-color-first !important;
}

::v-deep .editor .toastui-editor-contents,
::v-deep .editor .toastui-editor-defaultUI .ProseMirror {
    font-size: 14px;
    line-height: 1.7;
}

::v-deep .editor .toastui-editor-contents *:not(table) {
    line-height: 1.7;
}

::v-deep .editor .toastui-editor-contents h1,
::v-deep .editor .toastui-editor-contents h2,
::v-deep .editor .toastui-editor-contents h3,
::v-deep .editor .toastui-editor-contents h4,
::v-deep .editor .toastui-editor-contents h5,
::v-deep .editor .toastui-editor-contents h6,
::v-deep .editor .toastui-editor-contents p {
    color: $font-color-first !important;
}

::v-deep .editor .toastui-editor-contents th p {
    color: #fff !important;
}

::v-deep .editor .toastui-editor-contents blockquote {
    padding: 10px 15px;
    border-left-style: solid;
    border-left-width: 8px;
    border-color: #D6DBDF;
    background: none repeat scroll 0 0 rgba(102, 128, 153, .05);
}

::v-deep .editor .toastui-editor-contents > p,
::v-deep .editor .toastui-editor-contents > pre,
::v-deep .editor .toastui-editor-contents > blockquote {
    margin: 0 0 20px;
}

::v-deep .editor .toastui-editor-contents h1,
::v-deep .editor .toastui-editor-contents h2,
::v-deep .editor .toastui-editor-contents h3,
::v-deep .editor .toastui-editor-contents h4,
::v-deep .editor .toastui-editor-contents h5,
::v-deep .editor .toastui-editor-contents h6 {
    margin: 10px 0;
    font-weight: 500;
    line-height: 25px;
}

::v-deep .editor .toastui-editor-md-heading {
    font-weight: 500;
}

::v-deep .editor .toastui-editor-contents h1,
::v-deep .editor .toastui-editor-contents h2,
::v-deep .editor .toastui-editor-contents h3 {
    line-height: 40px
}

::v-deep .editor .toastui-editor-contents h1 {
    margin: 50px 0 20px;
}

::v-deep .editor .toastui-editor-contents h2 {
    margin: 35px 0 20px;
}

::v-deep .editor .toastui-editor-contents h3 {
    margin: 20px 0;
}

</style>
